<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>

    <script>
      var flag = false
      if (flag){
        let a = 3
      }

      function fn() {
        var flag = 3
      }

    </script>


    <script>
      // JS是词法作用域, 也称为静态作用域

      // var a = 2
      // function fn() {
      //   var b = 4
      //   console.log(a, b)
      // }
      // function fn2() {
      //   var a = 3
      //   fn()
      // }
      // fn2()
    </script>


    <script>
      /* 
      产生块作用域
      1. 有if/while/for这样的块
      2. let/const定义的变量
      */

      // for (let i = 0; i < 5; i++) {
      //   setTimeout(() => {
      //     console.log(i);
      //   }, 0);
      // }

      /* 
      {
        let i =0
        setTimeout(() => {
          console.log(i); // 0
        }, 0);
      }
      {
        i=1
        setTimeout(() => {
          console.log(i); // 1
        }, 0);
      }
      {
        i=2
        setTimeout(() => {
          console.log(i); // 2
        }, 0);
      }
      {
        i=3
        setTimeout(() => {
          console.log(i); // 3
        }, 0);
      }
      {
        i=4
        setTimeout(() => {
          console.log(i); // 4
        }, 0);
      }
      */

    </script>

    <script>
      /* 
      当给形参指定了默认值, 函数体就形成一个块作用域(在函数作用域内部)
      只有形参在函数作用域中, 参数体中定义的变量在块作用域中
      */
      var x = 2;
      function fn(
        x,
        y = function () {
          var z = 4
          x = 3;
          console.log(x);
        }
      ) {
        console.log(x);
        var x = 4;
        y();
        console.log(x);
      }
      fn(1);
      console.log(x);

      fn();

    </script>
  </body>
</html>
